import React, { Component } from 'react'
import style from './add.module.scss'
import {back_icon} from '../../common/icon/svg'
import { Picker, List, WhiteSpace} from 'antd-mobile';
import arrayTreeFilter from 'array-tree-filter';
import district from "./data"
import {request} from "../../request/request"
import {connect} from "react-redux"
import "./add.scss"
 class Add extends Component {
    state={
        flag:false,
        flag2:false,
        data: [],
        cols: 1,
        pickerValue: [],
        asyncValue: [],
        visible: false,
        colorValue: ['#00FF00'],
        }
    // 设置默认地址
    btn=()=>{
        let {flag} = this.state
        this.setState({
            flag:!flag
        })
    }
    // 保存
    save=()=>{
        let obj={
            name:this.name.value,
            ipone:this.ipone.value,
            city:this.getSel(),
            cityStr:this.state.pickerValue.join(','),
            detailed:this.msg.value,
        }
        console.log(obj);
        let active = Object.keys(obj).every(item=>{
            return obj[item]
        })
        if(active){
            let userList = localStorage.getItem("userList")
            if(!userList) return alert("请登录")
            obj.uid=JSON.parse(userList).uid
            obj.isdefault=this.state.flag?1:0,
            obj.flag=this.state.flag2?1:0
            obj.aid=this.props.location.state?this.props.location.state.item.aid:""
            request({
                url:"/Addaddress",
                method:"POST",
                data:obj
            }).then(res=>{
                console.log(res);
                if(res.data.code==="01"){
                    alert("成功")
                    this.props.history.push('/address')
                }else{
                    alert("添加失败")
                }
            })
        }else{
            alert('以上为必填项')
        }
    }
    componentDidMount(){
        if(this.props.location.state){
            let {name,ipone,detailed,isdefault,aid,cityStr} = this.props.location.state.item
            this.setState({
                flag2:true,
                flag:isdefault,
                pickerValue:cityStr.split(',')
            })
            this.name.value = name
            this.ipone.value = ipone
            this.msg.value =detailed
        }
    }
    //字符串，数组的处理
    getSel=()=>{
        const value = this.state.pickerValue;
        if (!value) {
          return '';
        }
        const treeChildren = arrayTreeFilter(district, (c, level) => c.value === value[level]);
        return treeChildren.map(v => v.label).join(',');
      }
    render() {
        console.log(this.props);
        
        return (
            <div className={style.add}>
                <div className={style.head}>
                    <span onClick={()=>this.props.history.push("/address")}>{back_icon}</span>
                    <span className={style.shou}>
                        {
                            this.state.flag2?"编辑收货地址":"添加收货地址"
                        }
                    </span>
                </div>
                <div className={style.info}>
                    <div className={style.list}>
                        <span>联系人</span>
                        <input placeholder="名字" ref={c=>this.name=c}></input>
                    </div>
                    <div className={style.list}>
                        <span>联系电话</span>
                        <input placeholder="请输入手机号" ref={c=>this.ipone=c}></input>
                    </div>
                    <div className={style.list}>
                        {/* <span>所在地区</span>
                        <input placeholder="请选择所在地区" ref={c=>this.city=c}></input> */}
                    <Picker
                        visible={this.state.visible}
                        data={district}
                        value={this.state.pickerValue}
                        onChange={v => this.setState({ pickerValue: v  })}
                        onOk={() => this.setState({ visible: false })}
                        onDismiss={() => this.setState({ visible: false })}
                        >
                        <List.Item extra={this.getSel()} onClick={() => this.setState({ visible:true })}>
                            选择地区
                        </List.Item>
                    </Picker>
                    </div>
                    <div className={style.list}>
                        <span>详细地址</span>
                        <input placeholder="请输入详细地址信息，如道路、门牌号、校区等" ref={c=>this.msg=c}></input>
                    </div>
                </div>
                <div className={style.normal}>
                    <span>设为默认地址</span>
                    <div className={this.state.flag?style.yuan+" "+style.active:style.yuan} onClick={this.btn}>
                        <span className={this.state.flag?style.check+" "+style.active:style.check}></span>
                    </div>
                </div>
                <div className={style.footer} onClick={this.save}>
                        保存
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    return {addressList:state.addressList};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        getAddress:(user)=>{
            dispatch({type:"ADDRESS", data:user});
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Add)
